<!-- H5不支持省市区，需手动引入 -->
<template>
	<picker
		:class="['z-picker', zClass]"
		:range="items"
		range-key="label"
		:value="value"
		:mode="mode"
		@change="onChange"
		@columnchange="onColchange"
	>
		<view class="input">
			<!-- 单列 -->
			<view v-if="mode==='selector'">{{items[value].label}}</view>
			<!-- 多列 -->
			<view v-else-if="mode==='multiSelector'" class="left">
				<view v-for="(v, i) in value" :key="i">
					{{items[i][v].label}}
					<text v-if="i<value.length-1" class="connector">{{connector}}</text>
				</view>
			</view>
			<!-- 其它 -->
			<view v-else>{{value}}</view>
			<text class="iconfont">&#xe6f8;</text>
		</view>
	</picker>
</template>

<script>
	export default{
		props: {
			'zClass':{type:String},
			'items':{type:Array},
			'value':{type:null},
			'connector':{type:String},
			'mode':{type:String, default:'selector'}
		},
		methods:{
			onChange(e){
				switch(this.mode){
					case 'selector':
						e.detail.mapValue = this.items[e.detail.value]
						break
					case 'multiSelector':
						e.detail.mapValue = e.detail.value.map((v, i)=>this.items[i][v])
						break
				}
				this.$emit('input', e.detail.value)
				this.$emit('change', e)
			},
			onColchange(e){
				this.$emit('columnchange', e)
			}
		}
	}
</script>

<style lang="scss">
	.z-picker{
		.input{
			display: flex;
			align-items: center;
			justify-content: space-between;
			min-height: $form-cell-min-height;
			padding: 15upx 30upx 15upx 0;
		}
		.left{
			display: flex;
		}
		.connector{
			margin: 0 6upx;
		}
	}
</style>
